<html>

<head>
 <meta charset="UTF-8">
    <title>百度</title>

    <link href="baidu.ico" rel="shortcut icon" type="ico图标路径"/>

    <style>
	<!--导航样式-->
	html,body{
	height:100%
	}
	html{
		overflow-y:auto
	}
	body{
		font:12px arial;
		text-align:center;
		background:#fff
	}
	
    .head{
        width:100%;
        height:150px;
        margin-top:0px;
    }
	.p_head1{
        width:540px;
        height:24px;         
        float:right;
        margin-top:25px;  
		color:black;
    }

    .lj{
        width:50px;
        height:24px;   
		font-size:16px;
        float:left;
        line-height:24px;
        text-align:center;          
    }

	a.lj:hover{
		color:#ff0000;
	}
	a.lj:link{
		color:black;
	}
	#xwtr,#htr{
		margin:0px 10px 0px 0px;
	}
	
	#gdtr{
		display:block;
		background-color:#3366FF;
	}
	.ws{
		width: 85px;
		min-height: 100px;
		border-left: 1px solid #e7e7e7;
		position: absolute;
		background-color: #f9f9f9;
		overflow: hidden;
		z-index: 2;
		right: 0;
		top: 0;
	}

	.ws,.yincang.{
		display: block;
		text-align: center;
		width: 66px;
		height: 76px;
		margin: 0 auto;
		border-bottom: #f0f0f0 1px solid;
		color: #666;
		text-decoration: none;
		overflow: hidden;
		overflow-x: hidden;
		overflow-y: hidden;
	}

	.more{
		color: #333;
		text-align: center;
		width: 66px;
		height: 43px;
		line-height: 43px;
		padding-top: 9px;
		margin: 0 auto;
		border-bottom: #f0f0f0 1px solid;
		font-size: 13px;
		cursor: default;
	}
	.cpcontain{
		position: relative;
	}

	.contain{
		overflow: hidden;
		overflow-x: hidden;
		overflow-y: hidden;
		
	}
	span{
		width: 36px;
		height: 36px;
		display: block;
		margin: 10px auto 5px;
		background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/logos/bdbri_icons_194ae06.png) no-repeat;
		cursor: pointer;
	}
	.nuomi{
		background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/logos/nuomi_7f5cd35.png) no-repeat;
		background-size: cover;

	}
	.yinyue{
		background: url(http://img.zcool.cn/community/01a15c564ace3332f87512f62d3dea.jpg@1280w_1l_2o_100sh.jpg) no-repeat;
		background-size: cover;
	}
	#yinyue,#tupian,#zhidao,#wenku,#fyb{
		text-decoration:none;
		color:black;
	}
	#yinyue:hover,#tupian:hover,#zhidao:hover,#wenku:hover,#fyb:hover{
		text-decoration:underline;
	}
	.tupian{
		background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/logos/image_55b5909.png) no-repeat;
		background-size: cover;
	}
	
	.zhidao{
		background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/logos/zhidao_cbf2aff.png) no-repeat;
		background-size: cover;
	}
	.wenku{
		background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/logos/wenku_aaf198d.png) no-repeat;
		background-size: cover;
	}
	.fyb{
		background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/logos/fengyunbang_1986a40.png) no-repeat;
		background-size: cover;
	}
	.qbcp{
		background:white;
	}
	
	
	<!--中间图片样式-->
    .mid{
		width:100%;
        height:130px;
        margin-top:0px;
    }
	from{
		margin:auto;
		width:800px;
		text-align:center;  
		margin:auto;
	}
    .srk{
        width:550px;   
		margin:auto;
        margin-top:0px;
		height:36px;
    }
	#gender{
		cursor:pointer;
		width:100px;
		height:36px;
		background-color:#3366FF;
	}
	.contain a{
		
		text-decoration: underline;
	}

    .ewm{
        width:100%;
        height:60px;            
        float:left;
        margin-top:0px;
    }  

    
    
   
    .p_ewm{
        width:60px;
        height:60px;
        margin:0 auto;
        float:left;
        margin-top:10%;
    }
	<!--二维码的样式-->
	.foot{
		width:100%;			
		height:50px;			
		margin:0 auto;			
		float:left;
		margin-top:15%;			
		text-align:center;			
		text-indent: 2em;			
		word-spacing:5px;
		color:#B0B0B0;
	}
	
	.p_foot{			
		text-indent: 2em;	
		margin-top:1%;
		font-size:12px;
	}

	#one{
		font-size:12px;
		color:color:#B0B0B0;
	}
	
    </style>

</head>

<body style="margin:0 auto;width:1200px" >

<!--导航-->

    <div  class="head" >
        <div class="p_head1">
            <a href="http://news.baidu.com/" class="lj" id="xwtr">新闻</a>   
            <a href="https://www.hao123.com/" class="lj" id="htr"> hao123</a> 
            <a href="https://map.baidu.com/" class="lj" id="dttr">地图</a> 
            <a href="http://v.baidu.com/" class="lj" id="sptr">视频 </a> 
			<a href="https://tieba.baidu.com/index.html" class="lj" id="tbtr">贴吧</a> 
            <a href="http://xueshu.baidu.com/" class="lj" id="xstr">学术</a> 
            <a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5" class="lj" id="dltr">登录 </a> 
            <a href="#" class="lj" id="sztr">设置 </a>
            <a href="#" class="lj" style="width:70px;" id="gdtr">更多产品</a> 
        </div>
    </div>
	<div class="ws" style="display:block;opacity:1;height:600px;">
	<div class="yincang">
	   <div class="more">更多产品</div>
		 <div class="contain" style="height:576px">
		  <div>
			<a id="yinyue" href="http://www.nuomi.com/?cid=002540" name="nuomi"><span class="nuomi">糯米</span></a>
			<a id="yinyue" href="http://music.taihe.com" name="yinyue"><span class="yinyue">音乐</span></a>
			<a id="tupian" href="http://image.baidu.com" name="tupian"><span class="tupian">图片</span></a>
			<a id="zhidao" href="http://zhidao.baidu.com" name="zhidao"><span class="zhidao">知道</span></a>
			<a id="wenku" href="http://wenku.baidu.com" name="wenku"><span class="wenku">文库</span></a>
			<a id="fyb" href="http://top.baidu.com" name="fyb"><span class="fyb">风云榜</span></a>
			<a id="qbcp" href="//www.baidu.com/more/" name="qbcp"><span class="qbcp">全部产品</span></a>
		 </div>
		</div>
	  </div>
	</div>

<!--中间-->
    <div id="mid" >
	<!--图片-->
      <div class="mid" >
         <a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" target="_blank">
          <img  height=130 width=270 src="https://www.baidu.com/img/bd_logo1.png?where=super" title="百度一下你就知道"/>
          </a>  
      </div>
 
<!--输入框-->
	  <div class="srk" >
		<form action="https://www.baidu.com/s"  method="get"  >
		 <input style="width:400px;height:36px;margin:auto;"type="text"/>
		 <a href="#" id="ss" class="ss" style="display:none"></a>
		 <input id="gender" name="gender" type="submit"  value="百度一下"/>  
		</form>
	  </div>
    </div> 
 
<!--二维码-->
    <div class="ewm" >
        <p class="p_ewm" style="margin-left:48%;">
           <img  height=60 width=60 src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" title="我是一个二维码"/><br/>
	&nbsp;&nbsp;百度
        </p>

    </div>

<!--底部链接-->
     <div class="foot">
		<p id="one"> 
		<a href="https://www.baidu.com/cache/sethelp/help.html">把百度设为主页</a>
		 <a href="http://home.baidu.com/">关于百度</a>
		 <a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome">About  Baidu</a>
		 <a href="http://e.baidu.com/?refer=888">百度推广</a>
		</p>

	   <p class="p_foot">
		 ©2019 Baidu
		 <a href="http://jianyi.baidu.com/">使用百度前必读 意见反馈 </a>
		 京ICP证030173号 
		 <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号 </a>
	   </p>
	 </div>
</body>

</html> 